<!doctype html>
<html>

<head>

  <meta charset="utf-8">
  <script src="../../../umd/d3plus-core.full.js"></script>

</head>

<body>

</body>

<script>

  var data = [
    {id: "alpha", value: 29, image: "https://datausa.io/static/img/attrs/thing_apple.png"},
    {id: "beta",  value: 10, image: "https://datausa.io/static/img/attrs/thing_fish.png"},
    {id: "gamma", value: 2,  image: "https://datausa.io/static/img/attrs/thing_tomato.png"}
  ];

  new d3plus.Treemap()
    .data(data)
    .groupBy("id")
    .shapeConfig({
      backgroundImage: function(d) {
        return d.image;
      },
      label: false
    })
    .sum("value")
    .render();

</script>

</html>
